<template>
  <tm-app class="app" color="#FFFCF1">
    <Navbar hideHome :fontSize="40" fontColor="#444444" title="" color="#FFFCF1" :shadow="0">
    </Navbar>
<!--  <view class="content">
      <WishList v-if="isInit && wishList.length"/>
      <Empty v-else-if="isInit && !wishList.length"/>
    </view>
    <image class="bg" mode="widthFix" :src="year_bg_image"></image> -->

    <tm-carousel autoplay :margin="[0, 16]" :round="3" :width="686" :height="300" :list="bannerList"></tm-carousel>

    <tm-sheet color="#FFFCF1">
        <tm-divider></tm-divider>
        <tm-grid  :width="638" :col="2" color="#FFFCF1">
            <tm-grid-item :height="240">
                <tm-button :height="200" :margin="[10]" :shadow="0" size="middle" label="慈善联接" @click="handleCharityLink"></tm-button>
            </tm-grid-item>
            <tm-grid-item color="orange" :height="240">
                <tm-button :height="200" :margin="[10]" :shadow="0" size="middle" label="日行一善" @click="handleDailyGood"></tm-button>
            </tm-grid-item>
            <tm-grid-item :height="240">
                <tm-button :height="200" :margin="[10]" :shadow="0" size="middle" label="许愿墙" @click="handleWishingWall"></tm-button>
            </tm-grid-item>
            <tm-grid-item :height="240">
                <tm-button :height="200" :margin="[10]" :shadow="0" size="middle" label="洞天福地（待开放）"></tm-button>
            </tm-grid-item>
        </tm-grid>
    </tm-sheet>

    <Tabbar />
  </tm-app>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import Navbar from '@/components/navbar/index.vue';
import year_bg_image from '/static/assets/images/index/year-bg.png';
import Empty from "./components/Empty/EmptyState.vue";
import WishList from "./components/WishList/WishListContainer.vue";
import Tabbar from '@/components/tabbar/index.vue'
import ImageButton from '@/components/ImageButton/index.vue'
import vip_btn_image from '/static/assets/images/index/btn-vip.png'
import { useWishStore } from '@/stores/wish'
import { redirect } from '/utils/index.ts'

import { useUserStore } from '@/stores/user.ts'

const userStore = useUserStore();

const wishStore = useWishStore()
const wishModalShow = ref(false);
const isInit = ref(false)

const wishList = computed(() => wishStore.wishList)

const bannerList = ['https://www.aibaxing.com/app/images/11.jpg',
                    'https://www.aibaxing.com/app/images/12.jpg',
                    'https://www.aibaxing.com/app/images/13.webp'
]
onMounted(async () => {
  await wishStore.list()
  isInit.value = true
})

const handleCharityLink = async () => {
  console.log('慈善联接按钮被点击');
  // TODO
	
	try {
		  const mPayInfo = await userStore.getPayInfo({packageId: 1});
			console.log("mPayInfo",mPayInfo)
	} catch (error) {
	    console.log(error);
	}
}

const handleDailyGood = () => {
  console.log('日行一善按钮被点击');
  redirect('/pages/blessings/Good/GoodPage')
}

const handleWishingWall = () => {
  console.log('许愿墙按钮被点击');
  redirect('/pages/blessings/WishWall/WishWall')
}
</script>

<style lang="less" scoped>
.app {
  position: relative;
  z-index: 0;
}

.bg {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.swiper {
    // height: 300rpx;
    widows: 100%;
}
.swiper-item {
    display: block;
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
}
</style>
